<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跑马灯</title>
    <script src="../lib/vue.main.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="浪起来" @click="lang"></input>
        <input type="button" value="低调" @click="stop"></input>
        <!--复制当前行到下一行的快捷键为shift+alt+向下方向键-->
        <h4>{{msg}}</h4>
    </div>
    <script>
        /* 
            注意：在VM实例中，如果想要获取data上的数据，或者想要调用methods中的方法，
            必须通过this.数据属性名或this.方法名来进行访问，这里的this就表示我们new出来的vm实例对象
        */
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'猥琐发育，别浪~~！',
                intervalId: null//在data上定义定时器Id
            },
            //1.给浪起来按钮绑定一个点击事件v-on
            //2.在按钮的事件处理函数中，写相关的业务逻辑代码，拿到msg字符串，
            //然后调用字符串的substring方法来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可
            //3.为了实现点击下按钮，自动截取的操作,需添加定时任务
            methods: {
                lang(){
                    if (this.intervalId != null) {return};
                    // =>箭头函数解决this的指向问题
                    this.intervalId = setInterval(() => {
                        //获取到头的第一个字符
                        var start = this.msg.substring(0,1);
                        //获取到后面的所有字符
                        var end = this.msg.substring(1);
                        //重新拼接得到新的字符串，并赋值给this.msg
                        this.msg = end + start
                    }, 400);
                },
                stop(){//停止定时器
                    clearInterval(this.intervalId);
                    //每当清除了定时器之后,需要将定时器Id置为null
                    this.intervalId = null;
                }
            }
            
        })
        //VM实例回监听自己身上data中所有数据的改变，只要数据易发生变化，就会自动把更新的数据从data上同步到页面上去，程序员只需要关心数据，不需要考虑如可重新渲染数据
    </script>
</body>
</html>